<template>
	<view class="">
		<view class="attestation-text">诚信交友，请先完成身份认证</view>
		<view class="inner identity-box">
			<view class="upload-identity-card">
				<view class="upload-identity-top">
					<view class="upload-li">
						<view class="u-upload-box">
							<template v-if="ladoAuthInfo.status==null || ladoAuthInfo.status==2">
								<u-upload :action="idcard" :custom-btn="true" :multiple="false" :show-upload-list="true"
									:header="uploadHeader" :max-count="maxPicNum" @on-success="uploadSuccessFront"
									:show-progress="false" class="upload-background vcard_positive">
									<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover"
										hover-stay-time="150"></view>
								</u-upload>
							</template>
							<template v-else-if="ladoAuthInfo.status==1 ||ladoAuthInfo.status==0">
								<img :src="loadAuthInfo.vcard_positive" alt="">
							</template>
						</view>
						<text>身份证正面</text>
					</view>
					<view class="upload-li">
						<view class="u-upload-box">
							<template v-if="loadAuthInfo.status==null || ladoAuthInfo.status==2">
								<u-upload :action="action" :custom-btn="true" :multiple="false" :header="uploadHeader"
									:show-upload-list="true" :max-count="maxPicNum" @on-success="uploadSuccessBack"
									:show-progress="false" class="upload-background vcard_negative">
									<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover"
										hover-stay-time="150"></view>
								</u-upload>
							</template>
							<template v-else-if="ladoAuthInfo.status==1 ||ladoAuthInfo.status==0">
								<img :src="loadAuthInfo.vcard_negative" alt="">
							</template>
						</view>
						<text>身份证反面</text>
					</view>
				</view>
				<view class="wx-view">
					<view class="title-view">
						交换微信：
					</view>
					<u-input class="input-view" v-model="form.wechat_no" :clearable="false"
						placeholder="请输入正确的微信号" placeholder-style="color:#8389a0" />
				</view>
			</view>
			<view class="real-bot inner" v-if="ladoAuthInfo.status != 1">
				<view class="global-button" @click="submitEvent">确定审核</view>
			</view>
			<view class="bottom" v-else>
				<view class="attestation-text-hint" style="margin-top: 20upx;margin-bottom: 20upx;text-align: center;">
					实名认证通过后不可修改,若要修改可联系客服</view>
				<view class="global-button">审核已通过</view>
			</view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	import request from '@/util/request/request.js';
	import {
		authUser,
		idcard,
		loadAuthInfo
	} from '@/api/user/user.js';
	import { EventBus } from "@/util/event-bus.js";
	export default {
		data() {
			const token = uni.getStorageSync('token') || '';
			return {
				isOnce:'',
				ladoAuthInfo: {},
				action: request.config.baseUrl + 'user/upload',
				idcard: request.config.baseUrl + 'ocr/idcard',
				form: {
					real_name: '',
					vcard_num: '',
					wechat_no:'',
				},
				uploadHeader: {
					token,
				},
				maxPicNum: 2,
				rules: {
					/* real_name: [
						{
							required: true,
							message: '请输入姓名!',
							trigger: ['change', 'blur']
						}
					],
					vcard_num: [
						{
							pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{7}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/,
							message: '请输入正确的证件号码!',
							trigger: ['blur']
						}
					] */
				},
				image: {
					vcard_positive: '', //正面
					vcard_negative: '',//背面
				},
				loadAuthInfo: {},
				tongGuoJson: {

				},
				shenHeStatus: ''
			};
		},
		onLoad(options) {
			const { once } = options;
			this.isOnce = once;
		},
		created() {
			loadAuthInfo().then(res => {
				this.ladoAuthInfo = res.data;
				Object.assign(this.loadAuthInfo, res.data)
				console.log('loadAuthInfo', this.loadAuthInfo)
			})
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			onUploaded(lists) {
				this.filesArr = lists;
			},

			uploadSuccessFront(data) {
				console.log('uploadSuccessFront', data)
				this.form.real_name = data.data.name;
				this.form.vcard_num = data.data.id_card;
				this.image.vcard_positive = data.data.img_info.url
				this.$set(this.form, 'vcard_positive', data.data.img_info.url);
			},
			uploadSuccessBack(data, index) {
				console.log('uploadSuccessFront', data)
				console.log('uploadSuccessFront-data.data', data.data)
				this.image.vcard_negative = data.data[0].url
				this.$set(this.form, 'vcard_negative', data.data[0].url);
			},
			uploadSuccess(data, index) {
				this.image.vcard_inhand = data.data[0].url
				this.$set(this.form, 'vcard_inhand', data.data[0].url);
			},
			submitEvent() {
				if(this.form.wechat_no.length == 0){
					this.$refs.uToast.show({
						title: '请输入正确的微信号',
						type: 'info'
					});
					return;
				}
				console.log('wechat_no', this.form.wechat_no)
				let isEmpty = false;
				Object.keys(this.image).map((item, index) => {
					if (this.image[item] == '') {
						isEmpty = true;
					}
				});
				console.log('valid', this.image, isEmpty)

				if (!isEmpty) {
					authUser(this.form).then(res => {
						if (res.status == 1) {
							this.$refs.uToast.show({
								title: res.message,
								type: 'success'
							});
							getApp().globalData.userInfo.certificated = true;
							EventBus.$emit("realNameSuccess", true);
							setTimeout(() => {
								uni.reLaunch({
									url: "/pages/home2/home"
								});
							}, 1000);
						}
					});
				} else {
					this.$refs.uToast.show({
						title: '请上传真实身份证',
						type: 'error'
					});
				}


			}
		}
	};
</script>

<style lang="scss">
	page {
		height: 100%;
		background: #fff;
	}

	.identity-box {
		background: #fff;
		width: 100%;
		height: 100%;
	}

	.attestation-text {
		background-color: #f7f7f7;
		color: #333;
		font-size: 28upx;
		margin-bottom: 60upx;
		padding: 10rpx 32rpx;
	}

	.upload-identity-card {
		.upload-identity-top {
			display: flex;
			justify-content: space-between;
		}

		.upload-identity-bot {
			display: flex;
			justify-content: flex-start;
		}

		.upload-li {
			padding: 0 40upx;
			text-align: center;
			color: rgba(71, 74, 88, 1);
			line-height: 36upx;
			margin-bottom: 40upx;
			position: relative;

			box-sizing: border-box;

			image {
				display: block;
				width: 236upx;
				height: 164upx;
				border: 1px dashed #ccc;
			}

			text {
				display: block;
				line-height: 60upx;
				margin-top: 10upx;
				font-size: 28upx;
			}

			.slot-btn {
				width: 240upx;
				height: 160upx;
			}

			.u-list-item {
				background: transparent !important;
				display: block;
				width: 240upx !important;
				height: 160upx !important;
				margin: auto !important;
			}
		}
		.wx-view{
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			background: #f7f7f7;
			border-radius: 60rpx;
			margin: 0 30rpx;
			padding: 10rpx 0;
			
			.title-view{
				color:#333;
				font-size: 30rpx;
				margin-right: 20rpx;
			}
			.input-view{
				width: 280rpx;
				color:#333;
				font-size: 30rpx;
			}
		}
	}

	.u-upload-box {
		height: 180upx;
	}

	.real-bot {
		position: fixed;
		bottom: 40upx;
		left: 0;
		width: 100%;

		.attestation-text-hint {
			font-size: 28upx;
			font-weight: 400;
			color: rgba(131, 137, 160, 1);
			line-height: 36upx;
			text-align: center;
			margin-bottom: 30upx;
		}
	}

	.upload-background {
		height: 160upx;
		width: 240upx;
		display: block;
	}

	.vcard_positive {
		background: url('http://static.kuaimayoupin.com/6817095717467294.png');
		background-size: 100% 100%;
	}

	.vcard_negative {
		background: url('http://static.kuaimayoupin.com/1700476787967895.png');
		background-size: 100% 100%;
	}

	.vcard_inhand {
		background: url('http://static.kuaimayoupin.com/4727248934815335.png');
		background-size: 100% 100%;
	}
	.global-button{
		background: linear-gradient(135deg, #ff5e6a 0%, #ff5e6a 100%);
		border-radius: 50rpx;
	
	}
</style>
